<template>
  <div class="couponCode_wrapper">
    <div class="couponCode_box">
      <div class="couponCode_box_info">
        <div class="coupon_info">
          <div class="info_box">
            <p><em>{{mSymbol.name}}</em><span>{{couponCode_info.coupon_value}}</span></p>
            <div class="purchase_info">消费满<span>{{couponCode_info.at_least}}</span>元使用</div>
          </div>
          <div class="name_box">{{coupon_code_alias}}</div>
        </div>
        <div class="coupon_bottom">
          <p>请记录下{{coupon_code_alias}}方便购物使用</p>
          <p>生效时间：{{couponCode_info.start_time}}</p>
          <p>到期时间：{{couponCode_info.end_time}}</p>
        </div>
      </div>
      <div class="couponCode_box_bottom">
        <span class="code">{{code}}</span>
        <span class="copy_btn" @click="copyClick(code,$event)">复制</span>
      </div>
      <p class="used" v-if="couponCode_info.user_id > 0 && couponCode_info.code_type == 0">该{{coupon_code_alias}}已被使用</p>
      <div class="use_btn" v-else-if="couponCode_info.is_use != 0" @click="goUseLink(skipUrl)">去使用</div>
      <div class="use_btn disabled" v-else>去使用</div>
    </div>
    <div class="couponCode_shade">
      <img src="https://img.wifenxiao.com/h5-wfx/images/activity/couponCode_shade.png" alt="" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { getCouponCode } from '@/api/item/activity'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  name: 'index',
  data() {
    return {
      code: '', // 优惠券码
      coupon_code_alias: '', // 优惠券名字
      skipUrl: '', // 去使用跳转链接
      couponCode_info: {} // 优惠券信息
    }
  },
  mounted() {
    // this.getCouponCodeInfo()
  },
  created() {
    this.getCouponCodeInfo()
  },
  methods: {
    // 获取优惠券码信息
    getCouponCodeInfo() {
      const pages = getCurrentPages() //获取加载的页面
      const currentPage = pages[pages.length - 1] //获取当前页面的对象
      const options = currentPage.options 
      // console.log('init1111', this.$route)
      // console.log('options', options)

      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      const sendData = {
        coupon_code: this.$route.query.coupon_code || options.coupon_code
      }
      // console.log('coupon_code', this.$route.query)
      getCouponCode(sendData).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.couponCode_info = res.data.coupon_info
          this.code = res.data.code
          this.skipUrl = res.data.skipUrl
          this.coupon_code_alias = res.data.coupon_code_alias
        }
      })
    },
    // 复制
    copyClick(text, event, notoast) {
      wx.setClipboardData({
          data: text,
          success(res) {
            if(notoast){
              wx.hideToast()
            }else{
              wx.showToast({
                title: '复制成功',
                icon: 'none',
              });
            }
          }
        })
    },
    // 去使用
    goUseLink(url) {
      openPage(url)
    }
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
.couponCode_wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(https://img.wifenxiao.com/h5-wfx/images/activity/couponCode_bg.png) no-repeat
    center/cover;
  .couponCode_box {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 520px;
    height: 660px;
    background: url(https://img.wifenxiao.com/h5-wfx/images/activity/couponCode_content_bg.png)
      no-repeat center/cover;
    box-shadow: 0 6px 16px rgba(199, 32, 32, 0.24);
    transform: translateX(-50%);
    z-index: 5;
    &_info {
      .coupon_info {
        display: flex;
        color: #fff;
        width: 504px;
        height: 250px;
        margin: 54px auto 0;
        background: url(https://img.wifenxiao.com/h5-wfx/images/activity/couponCode_coupon_bg.png)
          no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        .info_box {
          width: 380px;
          line-height: 170px;
          text-align: center;
          padding: 28px 0 40px 30px;
          p {
            font-size: 30px;
            span {
              font-size: 72px;
            }
          }
        }
        .name_box {
          font-size: 28px;
          width: 74px;
          text-align: center;
          padding: 28px 0 40px 34px;
          writing-mode: vertical-lr;
          letter-spacing: 4px;
        }
      }
      .coupon_bottom {
        line-height: 1;
        text-align: center;
        p {
          font-size: 24px;
          color: #666;
          padding: 12px 0;
          &:first-child {
            font-size: 32px;
            color: #333;
            line-height: 1.5;
            padding: 20px 0;
          }
        }
      }
    }
    &_bottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 118px;
      line-height: 118px;
      text-align: center;
      border-top: 1px dashed #c2c2c2;
      .code {
        font-size: 40px;
        color: #f32438;
      }
      .copy_btn {
        font-size: 28px;
        color: #5385ff;
      }
    }
    .used {
      font-size: 28px;
      color: #f32438;
      text-align: center;
    }
    .use_btn {
      position: absolute;
      bottom: -100px;
      left: 0;
      right: 0;
      font-size: 32px;
      width: 320px;
      height: 72px;
      line-height: 72px;
      text-align: center;
      margin: auto;
      background-color: #ffee78;
      border-radius: 60px;
      border: transparent;
      &.disabled {
        background-color: #ccc;
      }
    }
  }
  .couponCode_shade {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 307px;
    img {
      max-width: 100%;
      width: 100%;
    }
  }
}
</style>